<script setup lang="ts" name="cancelAccount">
import {ref, onMounted, reactive} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import { useRoute, useRouter } from "vue-router";
import { useUsersApi } from "/src/api/users";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";
import OaModal from "/@/components/common/oa-modal.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: ref(2),
		secondName: ref('')
	},
	userInfo: {},
	platformData: [
		{name: '我的信息', path: '/mine'},
		{name: '收款账号', path: '/mine/payee_account'},
		{name: '注销账户', path: '/mine/cancel_account'},
	],
	tips: {
		status: ref(false),
		type: 'warning',
		icon: '',
		title: '',
		content: '',
		confirm: '',
		close: ''
	},
	tips2: {
		status: ref(false),
		type: 'warning',
		icon: '',
		title: '',
		content: '',
		confirm: '',
		close: ''
	}
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 暂不注销
const onCancel = () => {
	router.push({
		path: '/mine'
	})
}

// 确认注销
const onSubmit = () => {
	lxsAppData.tips.status = true;
	lxsAppData.tips.type = 'warning';
	lxsAppData.tips.title = '确认注销账号吗';
	lxsAppData.tips.content = '完成注销后账号数据将无法恢复';
	lxsAppData.tips.confirm = '确认注销';
	lxsAppData.tips.close = '暂不注销';
}

// 确认注销
const onTipsConfirm = () => {
	lxsAppData.tips.status = false;

	if (lxsAppData.userInfo.amount > 0 || lxsAppData.userInfo.credit > 0) {
		lxsAppData.tips2.status = true;
		lxsAppData.tips2.type = 'error';
		lxsAppData.tips2.title = '申请注销失败';
		lxsAppData.tips2.content = '为了保护您的账户安全，我们建议您在完成所有提现操作后再进行账户注销。如果在提现过程中遇到任何问题，或者您需要进一步的帮助，请随时联系我们的客服团队。';
		lxsAppData.tips2.confirm = '确 认';
		return;
	}

	if (lxsAppData.userInfo.is_cancel == 1) {
		lxsAppData.tips2.status = true;
		lxsAppData.tips2.type = 'error';
		lxsAppData.tips2.title = '您的账户已提交注销申请';
		lxsAppData.tips2.content = '请注意，该账号注销有30天的冷静期(账号锁定期)。除法律法规规定和注销协议约定情形外，我们将在冷静期满后完成注销，在冷静期内登录该账号即视为取消注销流程。您将在点击确认后退出该账号。';
		lxsAppData.tips2.confirm = '确 认';
		return;
	}

	useUsersApi().cancelAccountSubmit({}).then(res => {
		if (res.code === 200) {
			lxsAppData.tips2.status = true;
			lxsAppData.tips2.type = 'success';
			lxsAppData.tips2.title = res.message;
			lxsAppData.tips2.content = res.message;
			lxsAppData.tips2.confirm = '确 认';
		} else {
			ElMessage.error(res.message);
		}
	})
}

// 确认注销2
const onTipsConfirm2 = () => {
	lxsAppData.tips2.status = false;
	if (lxsAppData.tips2.type == 'success') {
		Session.clear();
		router.push({
			path: '/login'
		});
	}
}

// 获取页面数据
const getPageData = async () => {
	const res = await useUsersApi().getUserInfo({});
	lxsAppData.userInfo = res.data.user_info;
	console.log('获取注销须知页面数据', lxsAppData.userInfo);
}

onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader :second-name="lxsAppData.tab.secondName" />

			<div class="main-content">

				<el-card shadow="hover" class="layout-padding-auto">
					<div class="simple4">
						<div class="simple4-main">
							<el-scrollbar height="612">
								<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/%E6%B3%A8%E9%94%80%E9%A1%BB%E7%9F%A5.png" alt="">
							</el-scrollbar>
						</div>
						<div class="simple4-foot">
							<el-button class="cancel-btn1" @click="onCancel" size="default">暂不注销</el-button>
							<el-button class="cancel-btn2" @click="onSubmit" size="default">确认注销</el-button>
						</div>
					</div>
				</el-card>

			</div>

		</div>

	</div>

	<OaModal
		:is-visible="lxsAppData.tips.status"
		:type="lxsAppData.tips.type"
		:title="lxsAppData.tips.title"
		:content="lxsAppData.tips.content"
		:confirm="lxsAppData.tips.confirm"
		:close="lxsAppData.tips.close"
		@confirm="onTipsConfirm"
		@close="onCancel"
	/>

	<OaModal
		:is-visible="lxsAppData.tips2.status"
		:type="lxsAppData.tips2.type"
		:title="lxsAppData.tips2.title"
		:content="lxsAppData.tips2.content"
		:confirm="lxsAppData.tips2.confirm"
		:close="lxsAppData.tips2.close"
		@confirm="onTipsConfirm2"
	/>
</template>

<style lang="scss">
.simple4 {
	.simple4-title {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F2F4F7;
		text {
			font-weight: bold;
			font-size: 20px;
			color: #000000;
		}
	}

	.simple4-main {
		margin-top: 12px;

		img {
			width: 100%;
		}
	}

	.simple4-foot {
		margin: 32px auto 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.cancel-btn1 {
			margin-right: 15px;
			font-size: 14px;
			color: #FC661C;
			background: rgba(252,102,28,0.12);
			border-radius: 5px 5px 5px 5px;
			border: none !important;
		}
		.cancel-btn1:hover {
			color: #FFFFFF;
			background: #ffb07d;
		}
		.cancel-btn2 {
			margin-left: 15px;
			font-size: 14px;
			color: #FFFFFF;
			background: #FC661C;
			border-radius: 5px 5px 5px 5px;
			border: none !important;
		}
		.cancel-btn2:hover {
			background: #ffb07d;
		}
	}
}
</style>